<template>
	<view class="page">
		<view class="list-box">
			<view v-for="(item, index) in List" :key="index" class="item dis-flex">
				<view class="icon"><image :src="imgPrefix('/static/image/icon/my_account_detail.png')"></image></view>
				<view class="dis-flex flex-box flex-x-between right">
					<view class="">
						<view class="f_32">充值金额</view>
						<view class="f_24 gery1 time">{{ item.createtime }}</view>
					</view>
					<view class="f_32 money">+{{ item.recharge_money }}</view>
				</view>
			</view>
			<load-more :status="loadingStatus"></load-more>
		</view>
	</view>
</template>

<script>
import API from '@/static/api/index.js';
import loadMore from '@/components/loadmore/index.vue';
const app = getApp();
export default {
	name: 'index',
	components: {
		loadMore
	},
	data() {
		return {
			loadingStatus: 'loading',
			num: 1,
			size: 10,
			total: 0,
			isRequest: false,
			List: []
		};
	},
	onShow() {
		this._rechargeLog();
	},
	onReachBottom() {
		let { isRequest, num, total, List } = this;
		if (!isRequest && (num == 1 || List.length < total)) {
			this.num += 1;
		}
	},
	watch: {
		num(val, oldVal) {
			this._rechargeLog();
		}
	},
	methods: {
		_rechargeLog() {
			let { isRequest, num, size, List } = this;
			if (!isRequest) {
				isRequest = true;
				this.loadingStatus = 'loading';
				API.rechargeLog({ page: num, size: size })
					.then(res => {
						app._log(res);
						let { code, data } = res;
						if (code == 1) {
							let list = num == 1 ? data.log : List.concat(data.log);
							this.List = list;
							this.total = data.total;
							app._log('订单数量', list.length, data.total);
							this.loadingStatus = list.length >= data.total ? 'nomore' : 'getmore';
						} else {
							this.loadingStatus = code == 405 ? (num == 1 ? 'empty' : 'nomore') : 'error';
							if (num == 1) {
								this.List = [];
								this.total = 0;
							}
						}
						isRequest = false;
					})
					.catch(err => {
						isRequest = false;
						this.loadingStatus = 'error';
						this.List = [];
						this.num = 1;
					});
			}
		}
	},
	onPullDownRefresh() {
		this.num = 1;
		this.List = [];
		this._rechargeLog();
	}
};
</script>

<style scoped lang="scss">
.page {
	background-color: white;
}
.list-box {
	.item {
		padding: 0 48rpx;
		.icon {
			padding: 40rpx 0;
			font-size: 0;
			image {
				width: 88rpx;
				height: 88rpx;
				margin-right: 24rpx;
			}
		}
		.right {
			padding: 40rpx 0;
			border-bottom: 1px solid #f2f2f2;
			.money {
				color: #7f4aff;
			}
			.time {
				margin-top: 12rpx;
			}
		}
	}
}
.more {
	padding: 20rpx 0;
}
.item:last-of-type .right {
	border-bottom: 0px solid #f2f2f2 !important;
}
</style>
